<script setup lang="ts">
import Editor from './Editor.vue';
import { TableData } from './models/Table';

const data1: TableData = {
    id: 0, name: "testTable",
    cells:
        [
            ["乘法口诀表（节选）", "", "", "", ""],
            ["1x1", "1x2", "1x3", "1x4", "1x5"], ["", "2x2", "2x3", "2x4", "2x5"],
            ["", "", "3x3", "3x4", "3x5"], ["", "", "", "4x4", "4x5"], ["", "", "", "", "5x5"]
        ],
    merges: [{ row: 0, col: 0, right: 4, down: 0 }]
}
const data2: TableData = {
    id: 0, name: "testTable",
    cells:
        [
            ["乘法口诀表（第二部分）", "", "", "", ""],
            ["5x5", "5x6", "5x7", "5x8", "5x9"], ["", "6x6", "6x7", "6x8", "6x9"],
            ["", "", "7x7", "7x8", "7x9"], ["", "", "", "8x8", "8x9"], ["", "", "", "", "9x9"]
        ],
    merges: [{ row: 0, col: 0, right: 4, down: 0 }]
}

async function doSthWithDataToSave1(data:TableData,callBack:(success:boolean,msg:string)=>void){
    //模拟用api保存数据，可检查合法性
    if(data.cells.length>2){
        console.log(data);
        callBack(true,"此处为体验环境，无保存功能(上)");
    }
    else{
        callBack(false,"表格过小，不允许保存(上)")
    }
}
async function doSthWithDataToSave2(data:TableData,callBack:(success:boolean,msg:string)=>void){
    //模拟用api保存数据，可检查合法性
    if(data.cells.length>2){
        console.log(data);
        callBack(true,"此处为体验环境，无保存功能(下)");
    }
    else{
        callBack(false,"表格过小，不允许保存(下)")
    }
}
</script>

<template>
    <div id="e1"><Editor :table-data="data1" @save="doSthWithDataToSave1"></Editor></div>
    <div id="e2"><Editor :table-data="data2" @save="doSthWithDataToSave2"></Editor></div>
</template>

<style scoped>
#e1{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 50vh;
}
#e2{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 50vh;
}
</style>